<template>
  <div class="quanju">
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '' }">患者管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/patient' }">患者列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <div class="hospitalMain-search">
        <div class="search">
          患者姓名:
          <el-input placeholder="请输入内容" v-model="input1" clearable></el-input>
        </div>
        <div class="search">
          患者性别:
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search">
          现居住址 :
          <el-input placeholder="请输入内容" v-model="input2" clearable></el-input>
        </div>
        <div class="search">
          病历填写程度:
          <el-input placeholder="请输入内容" v-model="input3" clearable>
          </el-input>
        </div>
        <div class="search">
          上次就诊时间：
          <el-input placeholder="请选择创建日期" suffix-icon="el-icon-date" v-model="input4"></el-input>
        </div>
        <div class="search">
          <div></div>
          <div>
            <el-button>重置</el-button>
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
      </div>
    </div>
    <!--------->

    <!--------->
    <div>
      <div>
        <div class="name_add">
          <div>
            <h3>患者列表</h3>
          </div>
          <div>
            <el-button type="primary">导出</el-button>
            <el-button type="primary" @click="add = true">新增患者</el-button>
          </div>
        </div>
        <!-- <div class="btn">
          <h3>患者列表</h3>
          <el-button type="primary">导出</el-button>
          <el-button type="primary" @click="add = true">新增患者</el-button>
        </div> -->
        <el-dialog title="新增患者" :visible.sync="add" width="30%" center>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="*手机号">
              <el-input v-model="form.shouji"></el-input>
            </el-form-item>
            <el-form-item label="*姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.resource">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="*出身年月">
              <el-date-picker v-model="form.chushen" format="yyyy-MM-dd" type="datetime" placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="*发病年龄">
              <el-input v-model="form.fabing"></el-input>
            </el-form-item>
            <el-form-item label="*现居地址">
              <el-select v-model="form.region" placeholder="请选择">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
              <el-select v-model="form.region2" placeholder="请选择" class="sele">
                <el-option label="上海" value="shanghai"></el-option>
                <el-option label="北京" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="add = false">关闭</el-button>
              <el-button type="primary" @click="add = false">完成</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
      <div></div>
    </div>

    <!--------->
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="患者姓名"> </el-table-column>
        <el-table-column prop="name" label="患者性别"> </el-table-column>
        <el-table-column prop="address" label="现居住地"> </el-table-column>
        <el-table-column prop="address" label="上次就诊时间"> </el-table-column>
        <el-table-column prop="address" label="病例填写程度"> </el-table-column>
        <el-table-column prop="address" label="绑定的医生"> </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" @click="ChaKan">查看</el-button>
            <el-button type="text">编辑</el-button>
            <el-button type="text">更换医生</el-button>
            <el-button type="text" @click="caser">病历</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination background layout="prev, pager, next" :total="1000">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "PatientList",
  async created() {
    let res = await this.$axios.get("/data.json");
    console.log(res);
  },
  data() {
    return {
      add: false,
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      value: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金",
        },
      ],
      option: [
        {
          value: "选项1",
          label: "男",
        },
        {
          value: "选项2",
          label: "女",
        },
      ],
      form: {
        name: "",
        region: "",
        type: [],
        resource: "",
        region2: "",
        shouji: "",
      },
    };
  },
  mounted() { },
  methods: {
    handleClick(row) {
      console.log(row);
    },
    onSubmit() {
      console.log("submit!");
    },
    caser() {
      this.$router.push("/patientcaser");
    },
    ChaKan() {
      this.$router.push("/yupeiyang");
    },
  },
};
</script>

<style scoped lang="less">
.patient_name {
  display: inline-block;
  width: 200px;
  margin: 50px 15px 20px 15px;
}

.patient_photo {
  display: inline-block;
  width: 455px;
  margin: 20px 10px 20px 10px;
}

.patient_names {
  display: inline-block;
  width: 455px;
  margin: 20px 10px 20px 25px;
}
.mybtn {
  text-align: center;
}

.sele {
  margin: 0 0 0 10px;
}

.hospitalMain-search {
  margin-right: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .search {
    display: flex;
    margin: 10px 0 10px;
    align-items: center;
    width: 30%;
    justify-content: space-between;

    .el-input,
    .el-select {
      width: 75%;
    }
  }
}

.btn {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}
</style>
